<template>
  <view class="favorites-page">
    <view class="navbar">
      <text class="back-btn" @click="goBack">←</text>
      <text class="title">我的收藏</text>
    </view>

    <!-- 收藏分类 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'goods' }" 
        @click="activeTab = 'goods'"
      >
        商品
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'dinner' }" 
        @click="activeTab = 'dinner'"
      >
        菜品
      </view>
    </view>

    <!-- 商品收藏列表 -->
    <view v-if="activeTab === 'goods'">
      <view class="empty" v-if="goodsFavorites.length === 0">
        <text class="empty-icon">☆</text>
        <text class="empty-text">暂无商品收藏</text>
      </view>
      <view class="goods-item" v-for="item in goodsFavorites" :key="item.goodsId" @click="goToGoodsDetail(item.goodsId)">
        <image :src="item.goodsImg" class="goods-img"></image>
        <view class="goods-info">
          <text class="goods-name">{{ item.goodsName }}</text>
          <text class="goods-price">¥{{ item.goodsPrice.toFixed(2) }}</text>
        </view>
        <view class="operate">
          <text class="delete-btn" @click.stop="removeFavorite('goods', item.goodsId)">删除</text>
        </view>
      </view>
    </view>

    <!-- 菜品收藏列表 -->
    <view v-if="activeTab === 'dinner'">
      <view class="empty" v-if="dinnerFavorites.length === 0">
        <text class="empty-icon">☆</text>
        <text class="empty-text">暂无菜品收藏</text>
      </view>
      <view class="dinner-item" v-for="item in dinnerFavorites" :key="item.id" @click="goToDinnerDetail(item.id)">
        <image :src="item.imgUrl" class="dinner-img"></image>
        <view class="dinner-info">
          <text class="dinner-name">{{ item.title }}</text>
          <text class="dinner-source">{{ item.source }}</text>
        </view>
        <view class="operate">
          <text class="delete-btn" @click.stop="removeFavorite('dinner', item.id)">删除</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'goods',
      goodsFavorites: [],
      dinnerFavorites: [],
      dinnerList: [
        {
          id: 1,
          title: "【时令爆款】鲜蔬田园风味套餐，初夏清爽首选",
          source: "美食风尚周报",
          imgUrl: "/static/dinner/dinner1.png"
        },
        {
          id: 2,
          title: "【非遗焕新】百年东坡肉创新套餐，老字号出圈之作",
          source: "饮食文化研究院",
          imgUrl: "/static/dinner/dinner2.png"
        },
        {
          id: 3,
          title: "【网红打卡】海南椰子鸡套餐，复刻热带海岛风味",
          source: "文旅美食探索官",
          imgUrl: "/static/dinner/dinner3.png"
        }
      ]
    }
  },
  onShow() {
    this.loadFavorites()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    loadFavorites() {
      // 加载商品收藏
      const goods = uni.getStorageSync('collectedGoods') || []
      this.goodsFavorites = Array.isArray(goods) ? goods : []

      // 加载菜品收藏
      this.dinnerFavorites = this.dinnerList.filter(item => {
        return uni.getStorageSync(`collect_${item.id}`)
      })
    },
    removeFavorite(type, id) {
      if (type === 'goods') {
        let goods = uni.getStorageSync('collectedGoods') || []
        goods = goods.filter(item => item.goodsId !== id)
        uni.setStorageSync('collectedGoods', goods)
      } else {
        uni.setStorageSync(`collect_${id}`, false)
      }
      uni.showToast({ title: '已取消收藏' })
      this.loadFavorites()
    },
    goToGoodsDetail(goodsId) {
      uni.navigateTo({
        url: `/pages/goods/goodsDetail?goodsId=${goodsId}`
      })
    },
    goToDinnerDetail(id) {
      uni.navigateTo({
        url: `/pages/enter/dinner/dinnerDetail?id=${id}`
      })
    }
  }
}
</script>

<style scoped>
.favorites-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}
.navbar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.back-btn {
  font-size: 36rpx;
  color: #333;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  flex: 1;
  text-align: center;
  color: #333;
}
.tabs {
  display: flex;
  background-color: #fff;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 25rpx 0;
  font-size: 30rpx;
  color: #666;
  position: relative;
}
.tab-item.active {
  color: #e67e22;
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 40%;
  height: 4rpx;
  background-color: #e67e22;
}
.empty {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
}
.empty-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}
.empty-text {
  font-size: 28rpx;
}

.goods-item, .dinner-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}
.goods-img, .dinner-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  object-fit: cover;
}
.goods-info, .dinner-info {
  flex: 1;
  margin-left: 20rpx;
  overflow: hidden;
}
.goods-name, .dinner-name {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.goods-price {
  font-size: 28rpx;
  color: #e67e22;
  margin-top: 10rpx;
  display: block;
}
.dinner-source {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}
.operate {
  width: 120rpx;
  text-align: center;
}
.delete-btn {
  font-size: 28rpx;
  color: #f43f30;
}
</style>